﻿@page "/pivot-table/remote-data"

@using Syncfusion.Blazor.PivotView
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Data
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates basic rendering of the pivot table bound to JSON or CSV data pulled from a remote server.</p>
</SampleDescription>
<ActionDescription>
   <p>The <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-pivot-table'>Blazor Pivot Table</a> supports JSON and CSV data source. The <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource'>DataSource</a></code> property in <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html'>PivotViewDataSourceSettings</a></code> class can be assigned with the result of <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html'>DataManager</a></code> to bind remote data.</p>
      The <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html'>SfDataManager</a></code>, which will act as an interface between the service endpoint and the pivot table, will require the below minimal
      information to interact with service endpoint to retrieve the required data properly.
      <ul><li><code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html'>SfDataManager->Url</a></code> - Defines the service endpoint to fetch data.</li>
         <li><code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html'>SfDataManager->Adaptor</a></code> - Defines the adaptor option. Here,
             <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html'>WebApiAdaptor</a></code> is used for remote binding.</li>
      </ul>
     <p>Adaptor is responsible for processing the response and request from/to the service endpoint. The predefined adaptors are,</p>
     <ul>
       <li><code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html'>UrlAdaptor</a></code> - Use this to interact with any remote service. This is the base adaptor for all remote based adaptors.</li>
       <li><code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html'>ODataAdaptor</a></code>- Use this to interact with OData endpoints.</li>
       <li><code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html'>ODataV4Adaptor</a></code> - Use this to interact with OData V4 endpoints.</li>
       <li><code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html'>WebApiAdaptor</a></code> - Use this to interact with Web API created under OData standards.</li>                    
    </ul>
     In this demo, remote data is bound by assigning service data as an instance of <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html'>DataManager</a></code> to the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource'>DataSource</a></code> property in <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html'>PivotViewDataSourceSettings</a></code> class. But for CSV, the service URL is directly set to <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url'>Url</a></code> for remote data consumption.
     <p>More information on the remote data binding can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/pivot-table/data-binding/#remote-data'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">

    <div id="dropdown-control" style="margin-bottom:5px;">
        <table style="width: 350px;">
            <tbody>
                <tr style="height: 50px">
                    <td>
                        <div>
                            <b>Content Type:</b>
                        </div>
                    </td>
                    <td>
                        <div>
                            <SfDropDownList TValue="string" TItem="DropDownData" DataSource="@ContentTypes" @bind-Value="CurrentDataType">
                                <DropDownListFieldSettings Text="Name" Value="Value"></DropDownListFieldSettings>
                            </SfDropDownList>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="content-wrapper">
        @if (CurrentDataType.Equals("JSON"))
        {
            <SfPivotView TValue="PivotProductDetails" Height="300" EnableValueSorting=true ShowTooltip=false>
                <PivotViewDataSourceSettings TValue="PivotProductDetails" ExpandAll=true EnableSorting=true>
                    <SfDataManager Url="https://bi.syncfusion.com/northwindservice/api/orders" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
                    <PivotViewColumns>
                        <PivotViewColumn Name="ProductName"></PivotViewColumn>
                    </PivotViewColumns>
                    <PivotViewRows>
                        <PivotViewRow Name="ShipCountry"></PivotViewRow>
                        <PivotViewRow Name="ShipCity"></PivotViewRow>
                    </PivotViewRows>
                    <PivotViewValues>
                        <PivotViewValue Name="Quantity" Caption="Quantity"></PivotViewValue>
                        <PivotViewValue Name="UnitPrice" Caption="Unit Price"></PivotViewValue>
                    </PivotViewValues>
                    <PivotViewFormatSettings>
                        <PivotViewFormatSetting Name="UnitPrice" Format="C0" UseGrouping=true></PivotViewFormatSetting>
                    </PivotViewFormatSettings>
                </PivotViewDataSourceSettings>
                <PivotViewGridSettings ColumnWidth="120"></PivotViewGridSettings>
            </SfPivotView>
        }
        else
        {
            <SfPivotView TValue="string[]" Height="300" EnableValueSorting=true ShowTooltip=false>
                <PivotViewDataSourceSettings TValue="string[]" ExpandAll=false EnableSorting=true Url="https://bi.syncfusion.com/productservice/api/sales" Type="DataSourceType.CSV">
                    <PivotViewColumns>
                        <PivotViewColumn Name="Item Type"></PivotViewColumn>
                        <PivotViewColumn Name="Sales Channel"></PivotViewColumn>
                    </PivotViewColumns>
                    <PivotViewRows>
                        <PivotViewRow Name="Region"></PivotViewRow>
                        <PivotViewRow Name="Country"></PivotViewRow>
                    </PivotViewRows>
                    <PivotViewValues>
                        <PivotViewValue Name="Total Cost"></PivotViewValue>
                        <PivotViewValue Name="Total Revenue"></PivotViewValue>
                        <PivotViewValue Name="Total Profit"></PivotViewValue>
                    </PivotViewValues>
                    <PivotViewFormatSettings>
                        <PivotViewFormatSetting Name="Total Cost" Format="C0" UseGrouping=true></PivotViewFormatSetting>
                        <PivotViewFormatSetting Name="Total Revenue" Format="C0" UseGrouping=true></PivotViewFormatSetting>
                        <PivotViewFormatSetting Name="Total Profit" Format="C0" UseGrouping=true></PivotViewFormatSetting>
                    </PivotViewFormatSettings>
                    <PivotViewDrilledMembers>
                        <PivotViewDrilledMember Name="Total Cost" Items=@(new string[] { "Baby Food" })></PivotViewDrilledMember>
                    </PivotViewDrilledMembers>
                </PivotViewDataSourceSettings>
                <PivotViewGridSettings ColumnWidth="120"></PivotViewGridSettings>
            </SfPivotView>
        }
    </div>
</div>

<style>
    .e-pivotview {
        min-height: 200px;
    }
    .control-section {
        padding-top: 5px;
    }
</style>

@code{
    public string CurrentDataType { get; set; } = "JSON";

    List<DropDownData> ContentTypes = new List<DropDownData>() {
        new DropDownData { Name = "JSON", Value = "JSON" },
        new DropDownData { Name = "CSV", Value = "CSV" }
    };

    public class DropDownData
    {
        public string Name { get; set; }
        public string Value { get; set; }
    }

    public class PivotProductDetails
    {
        public int Quantity { get; set; }
        public double UnitPrice { get; set; }
        public string ProductName { get; set; }
        public string ShipCountry { get; set; }
        public string ShipCity { get; set; }
    }
}